<template>
  <div class="right">
    <div class="U_head">
      <div class="search" id="search">
        <button id="back" @click="toUserCenter">返回</button>
        <input id="input2"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="formInline.name"
          @blur="findOrderByMNameUser()"
          @keyup.enter.native="findOrderByMNameUser()"
        >
        </input>
      </div>
      <div class="Navigation">
        <div class="whole"><a id="whole" @click="stateNavigation('全部')"
                              :class="{liBackground:changeLeftBackground=='全部'}">全部</a></div>
        <div class="Not_Shipped"><a @click="stateNavigation('未发货')"
                              :class="{liBackground:changeLeftBackground=='未发货'}">未发货</a></div>
        <div class="Shipped"><a @click="stateNavigation('已发货')"
                              :class="{liBackground:changeLeftBackground=='已发货'}">已发货</a></div>
        <div class="Completed"><a @click="stateNavigation('已完成')"
                              :class="{liBackground:changeLeftBackground=='已完成'}">已完成</a></div>
      </div>
    </div>
    <!--<router-view></router-view>-->
    <UserOrder :OrdersList="OrdersList"/>
  </div>

</template>

<script>
import {findOrdersAllUserencapsulation} from "../api/user";
import {findOrderByMNameUserencapsulation} from "../api/user"
import {stateNavigationencapsulation} from "../api/user"
import axios from "axios";
  import UserOrder from "./UserOrder";


  export default {
    name: "OrderNavigation",
    components: {
      UserOrder
    },
    data() {
      return {
        orderList: '',
        formInline: {
          name: "",
        },
        OrdersList: '',
        changeLeftBackground:'全部',
      };
    },


    methods: {

      //查询用户所有订单
      findOrdersAllUser() {
        var that = this;
        findOrdersAllUserencapsulation({
          uid: this.$store.state.user.uid
        }).then((res) => {
          that.OrdersList = res.data.data;
        });
        return that.OrdersList;
      },

      //根据商品名模糊搜索
      findOrderByMNameUser() {
        var that = this;
        if (this.formInline.name === "") {
          this.findOrdersAllUser();
        } else {
         findOrderByMNameUserencapsulation({
           uid: this.$store.state.user.uid, //从本地store中获取uid
           gName: this.formInline.name,
          }).then((res) => {
            that.OrdersList = res.data.data;
          });
        }
      },

      //导航栏查询
      stateNavigation(date) {
        var that = this;

        // 判断点击的哪个按钮,配置不同的路径
        if (date ==='全部'){
          // 改变导航栏字体大小颜色
          this.changeLeftBackground = date;
          document.getElementById("whole");
          this.findOrdersAllUser();
          return;
        }
        if (date ==='未发货'){
          // 查询未发货
          this.changeLeftBackground = date;
        }else if (date ==='已发货'){
          // 查询已发货
          this.changeLeftBackground = date;
        }else{
          // 查询已完成
          this.changeLeftBackground = date;
        }
        stateNavigationencapsulation({
          uid: this.$store.state.user.uid, //从本地store中获取uid
          oState :date,
        }).then((res) => {
          that.OrdersList = res.data.data;
        });
      },
      //返回用户个人中心
      toUserCenter(){
        this.$router.replace('/UserCenter')
      }


    },
    created() {
      this.findOrdersAllUser();
    },


  }
</script>

<style scoped>
  #search{
    width: 100%;
    height: 30px;
  }
  #input2{
    width: 80%;
    height: 80%;
  }
  /*返回按钮*/
  #back{
    float: left;
    height: 100%;
    padding-left: 5%;
    font-size: 15px;
    border: 0;
  }
  .right::before {
    content: '';
    position: fixed;
    z-index: -1;
    background-size: 100% auto;
    background-color: rgb(233, 233, 233);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0px;
    margin: 0px;

  }

  .U_head {
    /*  border: 1px solid red;*/
    background-color: rgb(233, 233, 233);
    position: fixed;
    width: 100%;
    height: 75px;
    left: 0;
    top: 0;
    z-index: 1000;
  }

  .whole {
    /*border: 1px solid red;*/
    height: 10px;
    width: 25%;
    float: left;
    left: 100px;
    margin-top: 8px;
  }

  .Not_Shipped {
    height: 10px;
    float: left;
    width: 25%;
    left: 100px;
    margin-top: 8px;
  }

  .Shipped {
    height: 10px;
    width: 25%;
    float: left;
    left: 100px;
    margin-top: 8px;
  }

  .Completed {
    height: 10px;
    width: 24%;
    float: left;
    left: 100px;
    margin-top: 8px;
  }
  .liBackground {
    color: rgb(252,84,48);
    font-weight: 700;
  }
</style>
